
<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Flex 布局 - UIkit 中文文档</title>
        <meta name="description" content="使用UIkit的flex组件，利用强大的Flexbox进行网页布局。">
        <meta name="author" content="UIkit中文网">
         
<meta name="keywords" content="UIkit布局,flexbox,方向,顺序,网格">
        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
        <link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon.png">
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.docs.min.css">
        <link rel="stylesheet" href="css/docs.css">
        <link rel="stylesheet" href="../vendor/highlight/highlight.css">
        <script src="../vendor/jquery.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="../vendor/highlight/highlight.js"></script>
        <script src="js/docs.js"></script>
    </head>

    <body class="tm-background">

        <nav class="tm-navbar uk-navbar uk-navbar-attached">
            <div class="uk-container uk-container-center">

                <a class="uk-navbar-brand uk-hidden-small" href="../index.html"><img class="uk-margin uk-margin-remove" src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>

                <ul class="uk-navbar-nav uk-hidden-small">
                    <li><a href="documentation_get-started.html">开始使用</a></li>
                    <li class="uk-active"><a href="core.html">核心组件</a></li>
                    <li><a href="components.html">附加组件</a></li>
                    <li><a href="customizer.html">定制工具</a></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

                <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

                <div class="uk-navbar-brand uk-navbar-center uk-visible-small"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></div>

            </div>
        </nav>

        <div class="tm-middle">
            <div class="uk-container uk-container-center">

                <div class="uk-grid" data-uk-grid-margin>
                    <div class="tm-sidebar uk-width-medium-1-4 uk-hidden-small">

                        <ul class="tm-nav uk-nav" data-uk-nav>

                            <li class="uk-nav-header">默认</li>
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>

                            <li class="uk-nav-header">布局类组件</li>
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li class="uk-active"><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>

                            <li class="uk-nav-header">导航类组件</li>
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>

                            <li class="uk-nav-header">页面元素</li>
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>

                            <li class="uk-nav-header">常用组件</li>
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>

                            <li class="uk-nav-header">JavaScript组件</li>
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动器</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>

                        </ul>

                    </div>
                    <div class="tm-main uk-width-medium-3-4">

                        <article class="uk-article">

                            <h1>Flex 布局</h1>

                            <p class="uk-article-lead">利用Flexbox的力量创建广泛的布局。</p>

                            <p>这个组件使用了Flexbox —— 一个比较新的概念，它拥有强大的布局效果。</p>

                            <hr class="uk-article-divider">

                            <h2 id="usage"><a href="#usage" class="uk-link-reset">用法</a></h2>

                            <p>若要使用这个组件，只需要添加 <code>.uk-flex</code> 类到一个 <code>&lt;div&gt;</code> 元素。这样将会创建flex容器。默认地，所有flex条目都会左对齐，并被赋予一致的高度和宽度。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-flex">
                                <div class="uk-width-1-4 uk-panel uk-panel-box">Box</div>
                                <div class="uk-width-1-4 uk-panel uk-panel-box uk-margin-left">Box</div>
                                <div class="uk-width-1-4 uk-panel uk-panel-box uk-margin-left" style="height: 100px;">Box</div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-flex"&gt;
    &lt;div&gt;...&lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3>行内的Flex</h3>

                            <p>默认情况下，flex容器显示为块元素。为了仍然保持按照flexbox模型对其内容进行布局，并赋予其行内元素的行为，需要用到 <code>.uk-flex-inline</code> 类来替代 <code>uk-flex</code>.</p>

                            <hr class="uk-article-divider">

                            <h2 id="modifiers"><a href="#usage" class="uk-link-reset">修饰</a></h2>

                            <p>你可以添加多个不同的类来调整flex的行为。</p>

                            <h3 id="alignment"><a href="#alignment" class="uk-link-reset">对齐</a></h3>

                            <p>这些类定义flex条目的水平或垂直对齐，并赋予它们彼此之间的间距。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table">
                                    <thead>
                                        <tr>
                                            <th>Class</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-flex-center</code></td>
                                            <td>添加这个类，水平居中flex条目</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-flex-right</code></td>
                                            <td>添加这个类，右对齐flex条目</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-flex-top</code></td>
                                            <td>添加这个类，顶部对齐flex条目</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-flex-middle</code></td>
                                            <td>添加这个类，垂直居中flex条目</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-flex-bottom</code></td>
                                            <td>添加这个类，底部对齐flex条目</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-flex-space-between</code></td>
                                            <td>添加这个类，使得条目均匀分布，第一个条目在主轴的开头，最后一个条目在主轴的末尾。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-flex-space-around</code></td>
                                            <td>添加这个类，使得条目均匀分布,使每个条目具有相同的左右空间。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">Example</h3>

                           <div class="uk-flex uk-flex-middle uk-flex-space-between">
                               <div class="uk-width-1-4 uk-panel uk-panel-box" style="height: 50px;">Box</div>
                               <div class="uk-width-1-4 uk-panel uk-panel-box" style="height: 70px;">Box</div>
                               <div class="uk-width-1-4 uk-panel uk-panel-box" style="height: 100px;">Box</div>
                           </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-flex uk-flex-middle uk-flex-space-between"&gt;...&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3 id="direction"><a href="#direction" class="uk-link-reset">方向</a></h3>

                            <p>这些类用于定义flex主轴的方向。默认地，flex条目按照水平从左到右的方向放置。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table">
                                    <thead>
                                        <tr>
                                            <th>Class</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-flex-row-reverse</code></td>
                                            <td>添加这个类，使flex条目从右到左排列。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-flex-column</code></td>
                                            <td>添加这个类，使flex条目垂直排列成一列。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-flex-column-reverse</code></td>
                                            <td>添加这个类，使flex条目从下到上排列。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">Example</h3>

                           <div class="uk-flex uk-flex-column uk-flex-column-reverse">
                               <div class="uk-width-1-4 uk-panel uk-panel-box">1</div>
                               <div class="uk-width-1-4 uk-panel uk-panel-box uk-margin-bottom">2</div>
                               <div class="uk-width-1-4 uk-panel uk-panel-box uk-margin-bottom">3</div>
                           </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

                            <pre><code>&lt;div class="uk-flex uk-flex-column uk-flex-column-reverse"&gt;...&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3 id="wrap"><a href="#wrap" class="uk-link-reset">换行</a></h3>

                            <p>默认情况下，flex条目将它们自身拟合到一行中。添加 <code>.uk-flex-wrap</code> 类，使条目不再匹配视口时切换到另一行。要改变条目的方向，使它们从右到左排列，添加 <code>.uk-flex-wrap-reverse</code> 类即可。下面这些类用来修饰换行的flex条目的对齐属性。强制将 flex条目放入一行，添加 <code>.uk-flex-nowrap</code> 类即可。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table">
                                    <thead>
                                        <tr>
                                            <th>Class</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-flex-wrap-top</code></td>
                                            <td>添加这个类，使多行flex条目对齐到顶部。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-flex-wrap-middle</code></td>
                                            <td>添加这个类，使多行flex条目垂直居中。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-flex-wrap-bottom</code></td>
                                            <td>添加这个类，使多行flex条目对齐到底部。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-flex-wrap-space-between </code></td>
                                            <td>添加这个类，使条目的行均匀分布，第一行在容器顶部，最后一行在容器底部。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-flex-wrap-space-around</code></td>
                                            <td>添加这个类，是条目的行均匀分布，每一行都有一样的空间。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-flex uk-flex-wrap uk-flex-wrap-reverse uk-flex-wrap-space-around" style="height: 250px; background: #fafafa;">
                                <div class="uk-width-1-3 uk-panel uk-panel-box uk-panel-box-primary">1</div>
                                <div class="uk-width-1-2 uk-panel uk-panel-box uk-panel-box-primary uk-margin-left">2</div>
                                <div class="uk-width-1-3 uk-panel uk-panel-box uk-panel-box-primary">3</div>
                                <div class="uk-width-1-3 uk-panel uk-panel-box uk-panel-box-primary uk-margin-left">4</div>
                                <div class="uk-width-1-2 uk-panel uk-panel-box uk-panel-box-primary">5</div>
                                <div class="uk-width-1-3 uk-panel uk-panel-box uk-panel-box-primary uk-margin-left">6</div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

                             <pre><code>&lt;div class="uk-flex uk-flex-wrap uk-flex-wrap-reverse uk-flex-wrap-space-around"&gt;...&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3 id="item-order"><a href="#item-order" class="uk-link-reset">条目排序</a></h3>

                            <p>默认地，flex条目根据源码的顺序排列。要将某个元素作为第一个或者最后一个进行显示，只需要添加下列类名中的一个。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table">
                                    <thead>
                                        <tr>
                                            <th>Class</th>
                                            <th>描述</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-flex-order-first</code></td>
                                            <td>将此条目显示为第一个</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-flex-order-last</code></td>
                                            <td>将此条目显示为最后一个</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-flex-order-first-small</code><br><code>.uk-flex-order-last-small</code></td>
                                            <td>作用于视口宽度 <em>480px</em> 以上设备。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-flex-order-first-medium</code><br><code>.uk-flex-order-last-medium</code></td>
                                            <td>作用于视口宽度 <em>768px</em> 以上设备。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-flex-order-first-large</code><br><code>.uk-flex-order-last-large</code></td>
                                            <td>作用于视口宽度 <em>960px</em> 以上设备。</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-flex-order-first-xlarge</code><br><code>.uk-flex-order-last-xlarge</code></td>
                                            <td>作用于视口宽度 <em>1220px</em> 以上设备。</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-flex">
                               <div class="uk-width-1-4 uk-panel uk-panel-box uk-margin-left">1</div>
                               <div class="uk-width-1-4 uk-panel uk-panel-box uk-margin-left">2</div>
                               <div class="uk-width-1-4 uk-panel uk-panel-box uk-flex-order-first">3</div>
                            </div>

                            <h3 class="tm-article-subtitle">Markup</h3>

<pre><code>&lt;div class="uk-flex"&gt;
   &lt;div class="uk-flex-order-first"&gt;...&lt;/div&gt;
&lt;/div&gt;</code></pre>

                            <hr class="uk-article-divider">

                            <h3 id="item-dimensions"><a href="#item-dimensions" class="uk-link-reset">条目的规模</a></h3>

                            <p>要确定一个flex条目需要占用多大的空间，为条目添加以下类中的一个即可。</p>

                            <div class="uk-overflow-container">
                                <table class="uk-table">
                                    <thead>
                                        <tr>
                                            <th>Class</th>
                                            <th>Description</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td><code>.uk-flex-item-none</code></td>
                                            <td>由内容决定其尺寸</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-flex-item-auto</code></td>
                                            <td>按条目的内容分配空间</td>
                                        </tr>
                                        <tr>
                                            <td><code>.uk-flex-item-1</code></td>
                                            <td>空间分配完全基于Flex</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>

                            <hr class="uk-article-divider">

                            <h2 id="flex-grid"><a href="#flex-grid" class="uk-link-reset">Flex与网格</a></h2>

                            <p>Flex组件可以与 <a href="grid.html">网格</a> 组合使用。</p>

                            <h3 class="tm-article-subtitle">Example</h3>

                            <div class="uk-grid uk-flex-middle" data-uk-grid-margin>
                                <div class="uk-width-medium-1-3">
                                    <div class="uk-panel"><img src="images/placeholder_400x250.svg" alt="Placeholder"></div>
                                </div>
                                <div class="uk-width-medium-2-3 uk-flex-middle">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                                </div>
                            </div>

                        </article>

                    </div>
                </div>

            </div>
        </div>

        <div class="tm-footer">
            <div class="uk-container uk-container-center uk-text-center">

                <ul class="uk-subnav uk-subnav-line uk-flex-center">
                    <li><a href="http://github.com/uikit/uikit">GitHub</a></li>
                    <li><a href="http://github.com/uikit/uikit/issues">Issues</a></li>
                    <li><a href="http://github.com/uikit/uikit/blob/master/CHANGELOG.md">Changelog</a></li>
                    <li><a href="https://twitter.com/getuikit">Twitter</a></li>
                </ul>

                <div class="uk-panel">
                    <p>Made by <a href="http://www.yootheme.com">YOOtheme</a> with love and caffeine.<br>Licensed under <a href="http://opensource.org/licenses/MIT">MIT license</a>.</p>
                    <a href="../index.html"><img src="images/logo_uikit.svg" width="90" height="30" title="UIkit" alt="UIkit"></a>
                </div>

            </div>
        </div>

        <div id="tm-offcanvas" class="uk-offcanvas">

            <div class="uk-offcanvas-bar">

                <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav="{multiple:true}">
                    <li class="uk-parent"><a href="#">UIkit 中文文档</a>
                        <ul class="uk-nav-sub">
                            <li><a href="documentation_get-started.html">开始使用</a></li>
                            <li><a href="documentation_how-to-customize.html">如何定制</a></li>
                            <li><a href="documentation_layouts.html">布局示例</a></li>
                            <li><a href="core.html">核心组件</a></li>
                            <li><a href="components.html">附加组件</a></li>
                            <li><a href="documentation_project-structure.html">项目结构</a></li>
                            <li><a href="documentation_less-sass.html">Less &amp; Sass 文件</a></li>
                            <li><a href="documentation_create-a-theme.html">创建主题</a></li>
                            <li><a href="documentation_create-a-style.html">创建样式</a></li>
                            <li><a href="documentation_customizer-json.html">Customizer.json</a></li>
                            <li><a href="documentation_javascript.html">JavaScript</a></li>
                            <li><a href="documentation_custom-prefix.html">自定义前缀</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">Core</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-wrench"></i> 默认</a>
                        <ul class="uk-nav-sub">
                            <li><a href="base.html">基础</a></li>
                            <li><a href="print.html">打印</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid.html">网格</a></li>
                            <li><a href="panel.html">面板</a></li>
                            <li><a href="block.html">块</a></li>
                            <li><a href="article.html">文章</a></li>
                            <li><a href="comment.html">评论</a></li>
                            <li><a href="utility.html">效果</a></li>
                            <li><a href="flex.html">Flex</a></li>
                            <li><a href="cover.html">覆盖</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="nav.html">导航菜单</a></li>
                            <li><a href="navbar.html">导航栏</a></li>
                            <li><a href="subnav.html">二级导航</a></li>
                            <li><a href="breadcrumb.html">面包屑</a></li>
                            <li><a href="pagination.html">分页</a></li>
                            <li><a href="tab.html">选项卡</a></li>
                            <li><a href="thumbnav.html">缩略图导航</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-check"></i> 页面元素</a>
                        <ul class="uk-nav-sub">
                            <li><a href="list.html">列表</a></li>
                            <li><a href="description-list.html">描述列表</a></li>
                            <li><a href="table.html">表格</a></li>
                            <li><a href="form.html">表单</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="button.html">按钮</a></li>
                            <li><a href="icon.html">图标</a></li>
                            <li><a href="close.html">关闭</a></li>
                            <li><a href="badge.html">徽章</a></li>
                            <li><a href="alert.html">提示框</a></li>
                            <li><a href="thumbnail.html">缩略图</a></li>
                            <li><a href="overlay.html">遮罩</a></li>
                            <li><a href="text.html">文本</a></li>
                            <li><a href="column.html">列</a></li>
                            <li><a href="animation.html">动画</a></li>
                            <li><a href="contrast.html">对比度</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dropdown.html">下拉菜单</a></li>
                            <li><a href="modal.html">模态对话框</a></li>
                            <li><a href="offcanvas.html">抽屉</a></li>
                            <li><a href="switcher.html">切换器</a></li>
                            <li><a href="toggle.html">拨动</a></li>
                            <li><a href="scrollspy.html">滚动监听</a></li>
                            <li><a href="smooth-scroll.html">平滑滚动</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-header">附加组件</li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-th-large"></i> 布局类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="grid-js.html">动态网格</a></li>
                            <li><a href="grid-parallax.html">视差网格</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-bars"></i> 导航类组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="dotnav.html">圆点导航</a></li>
                            <li><a href="slidenav.html">滑动导航</a></li>
                            <li><a href="pagination-js.html">动态分页</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-folder-open"></i> 常用组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="form-advanced.html">高级表单</a></li>
                            <li><a href="form-file.html">文件表单</a></li>
                            <li><a href="form-password.html">密码表单</a></li>
                            <li><a href="form-select.html">选择表单</a></li>
                            <li><a href="placeholder.html">占位符</a></li>
                            <li><a href="progress.html">进度条</a></li>
                        </ul>
                    </li>
                    <li class="uk-parent"><a href="#"><i class="uk-icon-magic"></i> JavaScript组件</a>
                        <ul class="uk-nav-sub">
                            <li><a href="lightbox.html">灯箱</a></li>
                            <li><a href="autocomplete.html">自动完成</a></li>
                            <li><a href="datepicker.html">日期选择器</a></li>
                            <li><a href="htmleditor.html">HTML 编辑器</a></li>
                            <li><a href="slider.html">滚动条</a></li>
                            <li><a href="slideset.html">滑块集</a></li>
                            <li><a href="slideshow.html">幻灯片</a></li>
                            <li><a href="parallax.html">视差</a></li>
                            <li><a href="accordion.html">手风琴</a></li>
                            <li><a href="notify.html">通知</a></li>
                            <li><a href="search.html">搜索</a></li>
                            <li><a href="nestable.html">可嵌套</a></li>
                            <li><a href="sortable.html">可排序</a></li>
                            <li><a href="sticky.html">附着</a></li>
                            <li><a href="timepicker.html">时间选择器</a></li>
                            <li><a href="tooltip.html">工具提示</a></li>
                            <li><a href="upload.html">上传</a></li>
                        </ul>
                    </li>
                    <li class="uk-nav-divider"></li>
                    <li><a href="../showcase/index.html">案例展示</a></li>
                    <li><a href="tutorials.html">视频教程</a></li>
                </ul>

            </div>

        </div>

    </body>
</html>